[Tips] Buefyのtaginputのautocompleteを使うためにはVue2.5を使う必要がある

こんにちは、CX事業本部の夏目です。

個人的なプロダクトを作る際にちょっと困ったことがあったので、共有します。

Buefy

BulmaというCSSフレームワークをベースにVue用の便利なUIコンポーネントを提供してくれているのがBuefyです。

今回、Buefyのコンポーネントの一つ、Taginputで問題が起きていました。

Taginputのサジェストが見えない

Taginputではユーザーのタグ入力の挙動と見栄えをよろしくやってくれます。

このTaginput、autocomplete という入力内容を元にサジェストしてくれる機能があるのですが、何故かうまく動かないことがあるようで。

GitHubのIssueを見てみるとどうも、Vue2.6へのアップデートが悪さしている様子。

解決方法

Issueにもありましたが、Vueのバージョンが2.6系だと起こるようなので2.5系に落として使うのが今の所簡単そうです。
(PRもあったのですが、どうもrejectされた模様)

なので、今回はpackage.jsonを編集して解決することにします。

{
    ...,
    "dependencies": {
        ...,
        "vue": "~2.5"
    },
    "devDependencies": {
        ...,
        "vue-template-compiler": "~2.5"
    }
}

package.jsonでのバージョン指定の詳しい方法は下の記事を参考にしてください。

これで、Vueのバージョンを2.5系に制限することができました。

まとめ

タグの入力とか自前での実装は極力したくはないのですが、どうしてもこういうことをしないといけないようです。

このバグ修正が入ったらいいなぁと思います。